
<template>
  <div class="home-footer">
    <div class="footer_module" @click="goPage(1)">
      <div>
        <img src="./../assets/img/xianshi.png" alt="" v-if="pageIndex !== 0">
        <img src="./../assets/img/xianshi1.png" alt="" v-else>
      </div>
      <span>首页</span>
    </div>
    <div class="footer_module" @click="goPage(2)">
      <div>
        <img src="./../assets/img/shangchuan.png" alt="" v-if="pageIndex !== 1">
        <img src="./../assets/img/shangchuan1.png" alt="" v-else>
      </div>
      <span>车主发布</span>
    </div>
    <!-- <div class="footer_module" @click="goPage(3)">
      <div>
        <img src="./../assets/img/tixing.png" alt="" v-if="pageIndex !== 2">
        <img src="./../assets/img/tixing1.png" alt="" v-else>
      </div>
      <span>发现</span>
    </div> -->
    <div class="footer_module" @click="goPage(4)">
      <div>
        <img src="./../assets/img/gerenzhongxin.png" alt="" v-if="pageIndex !== 3">
        <img src="./../assets/img/gerenzhongxin1.png" alt="" v-else>
      </div>
      <span>我的</span>
    </div>
  </div>
</template>

<script>
import { checkAccount } from '@/api/allapis'
import Lockr from 'Lockr'
export default {
  data () {
    return {
      pageIndex: '',
      toTel: false
    }
  },

  components: {
  },

  computed: {},

  created () {
    this.checkAccount()
  },
  mounted () {
    if (this.$route.name === 'index') {
      this.pageIndex = 0
    }
    if (this.$route.name === 'caruser') {
      this.pageIndex = 1
    }
    if (this.$route.name === 'discover') {
      this.pageIndex = 2
    }
    if (this.$route.name === 'mine') {
      this.pageIndex = 3
    }
  },

  watch: {
    $route: {
      handler: function (val, oldVal) {
        if (this.$route.name === 'index') {
          this.pageIndex = 0
        }
        if (this.$route.name === 'caruser') {
          this.pageIndex = 1
        }
        if (this.$route.name === 'discover') {
          this.pageIndex = 2
        }
        if (this.$route.name === 'mine') {
          this.pageIndex = 3
        }
      },
      // 深度观察监听
      deep: true
    }
  },

  methods: {
    checkAccount () {
      let params = {
        openid: this.$store.getters.getOpenid
      }
      checkAccount(params).then(res => {
        if (res.data === null) {
          Lockr.set('vertify', false)
        } else {
          Lockr.set('vertify', true)
        }
      })
    },
    goPage (type) {
      if (type === 1) {
        this.$router.push({name: 'index'})
      }
      if (type === 2) {
        if (Lockr.get('vertify')) {
          this.$router.push({name: 'caruser'})
        } else {
          this.$vux.alert.show({
            title: '人人同行提示',
            content: '请先绑定手机号',
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
          this.$router.push({name: 'telband'})
        }
      }
      if (type === 3) {
        this.$router.push({name: 'discover'})
      }
      if (type === 4) {
        if (Lockr.get('vertify')) {
          this.$router.push({name: 'mine'})
        } else {
          this.$vux.alert.show({
            title: '人人同行提示',
            content: '请先绑定手机号',
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
          this.$router.push({name: 'telband'})
        }
      }
    }
  }
}

</script>
<style lang='less' scoped>
  .home-footer{
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: fixed;
    padding:5px 10px;
    bottom: 0;
    border-top:1px solid #dddddd;
    box-shadow: 0px 0px 10px#ddd;
    z-index: 1;
    background: #fff;
    height: 50px;
    .footer_module{
      // img{
      //   display: block;
      // }
      text-align: center;
      font-size: 12px;
      
      div{ 
        text-align: center;
        img{
          width: 25px;
        }
      }
      span{
        display: block;
        margin-top: -5px;
      }
    }
  }
</style>